<template>
  <div>
    <el-container>
      <el-main>
        <el-header>订单表单</el-header>
        <div style="width: 400px;margin: auto">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="选择茶品">
              <el-select v-model="form.tname" placeholder="请选择茶品" style="width: 320px;" @change="updatePrice">
                <el-option
                    v-for="tea in teas"
                    :key="tea.tid"
                    :label="tea.name"
                    :value="tea.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="茶品单价">
              <el-input v-model="form.price" disabled></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number v-model="form.num" :min="1" required></el-input-number>
            </el-form-item>
            <el-form-item label="总价">
              <el-input v-model="totalPrice" disabled></el-input>
            </el-form-item>
            <el-form-item label="加料">
              <el-checkbox-group v-model="form.content">
                <el-checkbox label="山楂" name="type"></el-checkbox>
                <el-checkbox label="茉莉花" name="type"></el-checkbox>
                <el-checkbox label="柠檬" name="type"></el-checkbox>
                <el-checkbox label="枸杞" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="就餐类型">
              <el-radio-group v-model="form.type">
                <el-radio label="堂食" :aria-hidden="false"></el-radio>
                <el-radio label="打包" :aria-hidden="false"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="支付类型">
              <el-radio-group v-model="form.paytype">
                <el-radio label="WeChat Pay"></el-radio>
                <el-radio label="AliPay"></el-radio>
                <el-radio label="Cash"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="background-color: green; color: #fff;"  @click="onSubmit">提交订单</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.el-header {
  background-color:transparent;
  color: #333;
  text-align: center;
  line-height: 60px;
  font-weight: bold; /* 加粗字体 */
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 1000px;
  font-weight: bold; /* 加粗字体 */
  background-image: url('../../image/2.jpeg'); /* 添加背景图片 */
  background-size: cover; /* 覆盖整个背景 */
  background-position: center; /* 居中显示 */
}
</style>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {
        tid: '',
        tname: '',
        price: 0,  // 当前选中的茶品价格
        num: 1,    // 购买数量，默认为1
        content: [], // 加料选项
        type: '', // 就餐类型
        paytype: '',   // 支付类型
        allprice: ''
      },
      teas: [], // 存储从后端获取的茶品数据
      submitOrderForm:{
        tid:'',
        tname:'',
        num:'',
        price:'',
        allprice: '',
        content: '',
        type:'',
        paytype:'',
        note:''
      }
    }
  },
  computed: {
    totalPrice() {
      return this.form.price * this.form.num;
    }
  },
  methods: {
    fetchTeas() {
      axios.get('/api/user/teas')
          .then(res => {
            if (res.data.code === 1) { // 假设1表示成功
              this.teas = res.data.data; // 将响应数据赋值给teas
            } else {
              console.error('获取茶品失败:', res.data.msg);
            }
          })
          .catch(error => {
            console.error('请求出错:', error);
          });
    },
    updatePrice() {
      const selectedTea = this.teas.find(tea => tea.name === this.form.tname);
      if (selectedTea) {
        this.form.price = selectedTea.price;
        this.form.tid = selectedTea.tid; // 更新 tid
      } else {
        this.form.price = 0; // 如果没有找到匹配的茶品，清空价格
        this.form.tid = null; // 清空 tid
      }
    },
    onSubmit() {
      this.calculateTotalPrice();
      // 将 form 表单的值复制到 submitOrderForm 对象中
      this.submitOrderForm = {
        ...this.form, // 使用扩展运算符复制所有属性
        content: this.form.content.join(', '), // 将加料数组转字符串
        allprice: this.form.allprice, // 确保计算后的总价也被复制
        note: '' // 假设note字段是空的，除非有其他地方设置它
      };

      console.log(this.submitOrderForm); // 打印出来检查数据是否正确

      // 发送订单信息
      axios.post('/api/user/orders', this.submitOrderForm)
          .then(res => {
            if (res.data.code === 1) { // 假设1表示成功
              console.log('订单提交成功:', res.data);
              this.$message({
                type: 'success',
                message: '订单提交成功!'
              });
            } else {
              console.error('订单提交失败:', res.data.msg);
            }
          })
          .catch(error => {
            console.error('请求出错:', error);
          });
    },
    calculateTotalPrice() {
      this.form.allprice = this.totalPrice;
    }
  },
  mounted() {
    this.fetchTeas();
  }
}
</script>
